<template>
<!-- 分类排行榜 -->
    <div>
        <Header :Title="title" :Type='type'></Header>
        <van-list
            v-model="loading"
            :finished="finished"
            offset='10'
            :immediate-check='false'
            finished-text="没有更多了"
            @load="Loading">
            <div class="item" v-for="(i,j) in BookList" :key='j' @click="goBookDetails(i.id)">
                <div class="img">
                    <img :src="i.cover" alt="">
                </div>
                <div class="content">
                    <h3>{{i.title}}</h3>
                    <p>{{i.longIntro}}</p>
                    <p>
                        <span>{{i.author}} </span>
                        <span>{{i.majorCate}} </span>
                    </p>

                </div>
            </div>
        </van-list>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
export default {
    name:'RankList',
    components:{
        Header,
    },
    data(){
        return {
            title:'快读',
            type:2,
            BookList:[],
            Booktype:'',
            loading: false,
            finished: false,
            page:1,
        }
    },
    created(){
        this.$api.Preflight().then(res=>{
            this.getNovel()
            // console.log(1)
        }).catch((()=>{
            console.log('请求出错')
        }))
    },
    mounted(){
        this.Booktype=this.$route.params.type
        switch(this.$route.params.type){
            case 'hot':
                this.title='热门榜'
                break
            case 'new':
                this.title='新书榜'
                break
            case 'reputation':
                this.title='口碑榜'
                break
            case 'over':
                this.title='完结榜'
                break
            default :
                break
        }
    },
    methods:{
        sign(){
            this.$api.Preflight().then(res=>{
            this.getNovel()
            // console.log(1)
            }).catch((()=>{
                console.log('请求出错')
            }))
        },
        getNovel(){
            let params={
                type:this.Booktype,
                size:5,
                page:this.page,
            }
            this.$api.getNovel(params).then(res=>{
                if(res.errorno==200){
                    this.BookList=this.BookList.concat(res.data)
                }
                this.loading=false
            }).catch((()=>{
                this.loading=false
                console.log('请求出错')
            }))
        
        },
        Loading(){
            this.page++
            this.sign()
        },
        goBookDetails(v){
            this.$router.push({
                name:'BookDetails',
                params:{
                    id:v
                }
            })
        },
    }
}
</script>
<style lang="stylus" scoped>
.item
  height 2.4rem
  padding .2rem
  display flex
  .img
    width 30%
    img
      width 80%
      text-align center
  .content
    width 70%
    font-size .28rem
    border-bottom .02rem solid #ccc
    h3
        height .56rem
    p:first-of-type
      font-size .24rem
      height .72rem  
      line-height .36rem
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow hidden
    p:last-child
        padding-top .2rem
        color #2494f9
        span:first-child
            padding-right .2rem
            margin-right .2rem
            border-right .02rem solid #2f94f9

</style>